<template>
  <div id="building" class="building">

  </div>
    <div class="rightbar">
        <div id="menu11" class="esri-widget">
            <div id="sliceContainer"></div>
            <div id="sliceOptions" v-show="sliceOptionShow" style="padding: 0 15px;box-sizing: border-box;">
                <button
                        class="esri-button esri-button--secondary"
                        id="resetPlaneBtn"
                        type="button"
                        title="Reset slice plane"
                        style="margin-bottom: 12px"
                >
                    重置切片平面
                </button>
                <button
                        class="esri-button esri-button--secondary"
                        id="clearPlaneBtn"
                        type="button"
                        title="Clear slice plane"
                        style="margin-bottom: 12px"
                >
                    清除切片
                </button>
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted, ref } from "vue"
import SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
import TileInfo from "@arcgis/core/layers/support/TileInfo.js";
import Extent from "@arcgis/core/geometry/Extent.js";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer.js";
import Map from "@arcgis/core/Map.js";
import SceneView from "@arcgis/core/views/SceneView.js";
import BuildingSceneLayer from "@arcgis/core/layers/BuildingSceneLayer.js";
import SlicePlane from "@arcgis/core/analysis/SlicePlane.js";
import Slice from "@arcgis/core/widgets/Slice.js";
export default {
    name: 'building',
    setup(){
        //房屋剖切
        let sliceOptionShow = ref(false)
        let token = import.meta.env.VITE_APP_3DBASE_URL; //20532113fca1cb9c2cf4ed1c9b11c377
        let initMap = () => {
            const spatialReference = new SpatialReference({
                wkid: 4326
            });
            let tileInfo = new TileInfo({
                dpi: window.devicePixelRatio * 96 ,
                rows: 256,
                cols: 256,
                compressionQuality: 0,
                origin: {
                    x: -180,
                    y: 90
                },
                spatialReference: spatialReference,
                lods: [
                    { level: 0, levelValue: 1, scale: 295829355.45, resolution: 0.703125 },
                    { level: 1, levelValue: 2, scale: 147914677.725, resolution: 0.3515625 },
                    { level: 2, levelValue: 3, scale: 73957338.8625, resolution: 0.17578125 },
                    { level: 3, levelValue: 4, scale: 36978669.43125, resolution: 0.087890625 },
                    { level: 4, levelValue: 5, scale: 18489334.715625, resolution: 0.0439453125 },
                    { level: 5, levelValue: 6, scale: 9244667.3578125, resolution: 0.02197265625 },
                    { level: 6, levelValue: 7, scale: 4622333.67890625, resolution: 0.010986328125 },
                    { level: 7, levelValue: 8, scale: 2311166.839453125, resolution: 0.0054931640625 },
                    { level: 8, levelValue: 9, scale: 1155583.4197265625, resolution: 0.00274658203125 },
                    { level: 9, levelValue: 10, scale: 577791.7098632812, resolution: 0.001373291015625 },
                    { level: 10, levelValue: 11, scale: 288895.8549316406, resolution: 0.0006866455078125 },
                    { level: 11, levelValue: 12, scale: 144447.9274658203, resolution: 0.00034332275390625 },
                    { level: 12, levelValue: 13, scale: 72223.96373291015, resolution: 0.000171661376953125 },
                    { level: 13, levelValue: 14, scale: 36111.98186645508, resolution: 0.0000858306884765625 },
                    { level: 14, levelValue: 15, scale: 18055.99093322754, resolution: 0.00004291534423828125 },
                    { level: 15, levelValue: 16, scale: 9027.99546661377, resolution: 0.000021457672119140625 },
                    { level: 16, levelValue: 17, scale: 4513.997733306885, resolution: 0.000010728836059570312 },
                    { level: 17, levelValue: 18, scale: 2256.9988666534423, resolution: 0.000005364418029785156 },
                    { level: 18, levelValue: 19, scale: 1128.4994333267211, resolution: 0.000002682209014892578 }
                ]
            });
            //2.2 定义地图的extent
            const fullExtent = new Extent(-180, -90, 180, 90, spatialReference);
            const tdtyxlayer = new WebTileLayer({ // 天地图影像地图
                id: "test",
                title: "天地图影像地图",
                // urlTemplate: "http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" + token,
                urlTemplate: "http://{subDomain}.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk="+token,
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                fullExtent: fullExtent,
                tileInfo,
                copyright: '天地图',
                spatialReference: spatialReference
            });

            const tdtzjlayer = new WebTileLayer({ // 天地图影像注记
                id: "test",
                title: "天地图影像注记",
                urlTemplate: 'http://{subDomain}.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk='+token,
                subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                fullExtent: fullExtent,
                tileInfo,
                copyright: '天地图',
                spatialReference: spatialReference
            });

            window.map2 = new Map({
                basemap: {
                    baseLayers: [tdtyxlayer, tdtzjlayer]
                },
            });

            window.viewer2 = new SceneView({ //SceneView
                container: "building",
                map: window.map2,
                zoom: 3,
                constraints: {
                    minZoom: 17,
                    maxZoom: 20
                }
            });

            window.viewer2.when(() => {
                addBuilding()
            })

        }

        let addBuilding = () => {
            //房屋数据
            const buildingLayer = new BuildingSceneLayer({
                url: "https://tiles.arcgis.com/tiles/V6ZHFr6zdgNZuVG0/arcgis/rest/services/BSL__4326__US_Redlands__EsriAdminBldg_PublicDemo/SceneServer",
                title: "Administration Building, Redlands - Building Scene Layer",
                elevationInfo: {
                    // mode: 'absolute-height', // 将模型贴地显示
                    // offset: -40
                }
            });

            window.map2.add(buildingLayer)

            window.viewer2.whenLayerView(buildingLayer).then((layerView) => {
                if(layerView){
                    let fullExtent = buildingLayer.fullExtent
                    if(fullExtent){
                        window.viewer2.goTo({
                            target: fullExtent,
                            zoom: 30,
                            duration: 3000,
                            heading: -20
                        })
                    }
                }

                //开始设置剖切
                const excludedLayers = [];
                const sliceButton = document.getElementById("slice");
                const resetPlaneBtn = document.getElementById("resetPlaneBtn");
                const clearPlaneBtn = document.getElementById("clearPlaneBtn");
                const sliceOptions = document.getElementById("sliceOptions");
                const plane = new SlicePlane({
                    position: {
                        latitude: 34.0600460070941,
                        longitude: -117.18669237418565,
                        z: 417.75
                    },
                    tilt: 32.62,
                    width: 29,
                    height: 29,
                    heading: 0.46
                });
                let sliceWidget = null;
                let doorsLayer = null;
                let sliceTiltEnabled = true;

                (async function (){
                    let ui = await window.viewer2.ui.add("menu11", "top-right");
                    sliceOptionShow.value = true
                })()





                buildingLayer.when(() => {
                    buildingLayer.allSublayers.forEach((layer) => {
                        switch (layer.modelName) {
                            case "FullModel":
                                layer.visible = true;
                                break;
                            case "Overview":
                            case "Rooms":
                                layer.visible = false;
                                break;
                            case "Doors":
                                doorsLayer = layer;
                                excludedLayers.push(layer);
                                break;
                            default:
                                layer.visible = true;
                        }
                    });

                    setSliceWidget();
                });

                function setSliceWidget() {
                    sliceWidget = new Slice({
                        view: window.viewer2,
                        container: "sliceContainer"
                    });
                    sliceWidget.viewModel.excludedLayers.addMany(excludedLayers);
                    sliceTiltEnabled = true;
                    sliceWidget.viewModel.tiltEnabled = sliceTiltEnabled;
                    sliceWidget.viewModel.shape = plane;
                }

                resetPlaneBtn.addEventListener("click", () => {
                    // document.getElementById("tiltEnabled").checked = true;
                    sliceTiltEnabled = true;
                    sliceWidget.viewModel.tiltEnabled = sliceTiltEnabled;
                    sliceWidget.viewModel.shape = plane;
                });

                clearPlaneBtn.addEventListener("click", () => {
                    sliceWidget.viewModel.clear();
                });
            })
        }
        onMounted(() => {
            initMap()
        })

         return {
             sliceOptionShow
         }
    }
}
</script>

<style lang="less" scoped>
.building{
  width: 100%;
  height: 100%;
}
.rightbar{
  :deep(.esri-ui-top-right){
    #sliceOptions{
      pdding: 0 15px;
      box-sizing: border-box;
    }

  }
}
& :deep(.esri-ui-top-right){
  top: 10%;
  right: 23%;
}
</style>
